<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        .input, form+a {
            margin: 20px 20px;
            width: 250px;
        }
        .input>label {
            display: inline-block;
            width: 80px;
            text-align: right;
        }
        .input:last-child {
            text-align: center;
        }
        input[type=text], input[type=password] {
            outline: none;
        }
        input[type=submit], input[type=reset] {
            width: 60px;
        }
        form+a {
            text-decoration: none;
            color: blue;
        }
        .hint {
            margin-left: 20px;
            color: red;
            font-size: 0.8em;
            height: 20px;
        }
        .mobile {
            width: 300px;
        }
        .photo {
            width: 350px;
        }
        .preview {
            margin: 10px 50px;
        }
        .intro {
            width: 720px;
        }
    </style>
    <link rel="stylesheet" href="{% static 'js/kindeditor/themes/default/default.css' %}" />
</head>
<body>
    <h1>用户注册</h1>
    <hr>
    <p class="hint">{{ hint }}</p>
    <form action="/vote/register/" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="input">
            <label>用户名：</label>
            <input type="text" name="username" required minlength="4" maxlength="20">
        </div>
        <div class="input">
            <label>密码：</label>
            <input type="password" name="password">
        </div>
        <div class="input">
            <label>确认密码：</label>
            <input type="password" name="repassword">
        </div>
        <div class="input mobile">
            <label>手机号：</label>
            <input type="tel" name="tel">
            <input type="button" id="sendBtn" value="发送验证码">
        </div>
        <div class="input">
            <label>验证码：</label>
            <input type="text" name="mobilecode">
        </div>
        <div class="input photo">
            <label>头像：</label>
            <input type="file" name="photo">
            <div class="preview">
                <img id="photoPreview" src="" width="120">
            </div>
        </div>
        <div class="input intro">
            <label>自我介绍：</label>
            <div id="editor"></div>
            <textarea name="intro" id="intro" style="display: none;"></textarea>
        </div>
        <div class="input">
            <input type="submit" value="注册">
            <input type="reset" value="重置">
        </div>
    </form>
    <a href="/vote/login/">返回登录</a>
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script charset="UTF-8" src="{% static 'js/wangEditor.min.js' %}"></script>
    <script>
        const E = window.wangEditor
        let editor = new E('#editor')
        editor.customConfig.uploadImgServer = '/vote/upload/'
        editor.customConfig.uploadImgMaxLength = 9
        editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
        editor.customConfig.onchange = function (html) {
            $('#intro').val(html)
        }
        editor.create()

        $(() => {
            $('#sendBtn').on('click', (evt) => {
                let tel = $(evt.target).prev().val()
                $.getJSON('/vote/mobile/' + tel, (json) => {
                    alert(json.message)
                    if (json.code == 200) {
                        $('#sendBtn').prop('disabled', true)
                        setTimeout(() => {
                            $('#sendBtn').prop('disabled', false)
                        }, 120000)
                    }
                })
            })
            $('input[name=photo]').on('change', (evt) => {
                let file = evt.target.files[0]
                if (file) {
                    let fr = new FileReader()
                    fr.addEventListener('loadend', (evt) => {
                        $('#photoPreview').attr('src', evt.target.result)
                    })
                    fr.readAsDataURL(file)
                } else {
                    $('#photoPreview').attr('src', '')
                }
            })
        })
    </script>
</body>
</html>